<script lang="ts">
	import Tooltip from '$lib/components/Feedback/Tooltip/Tooltip.svelte';
	import ComponentPreview from '$lib/components/Others/ComponentBrowser/ComponentPreview.svelte';
	import Table from '$lib/components/Data/Table/Table.svelte';
	import TableColumn from '$lib/components/Data/Table/TableColumn.svelte';
	import RectButton from '$lib/components/Basic/Button/RectButton.svelte';

	// 基础用法示例代码
	const basicCode = `<script lang="ts">
	import Tooltip from '$lib/components/Feedback/Tooltip/Tooltip.svelte';
<\/script>

<Tooltip content="这是一个基础提示">
	<RectButton label="悬停查看提示" type="ghost" slot="trigger"></RectButton>
</Tooltip>`.trim();

	// 位置选择示例代码
	const placementCode = `<script lang="ts">
	import Tooltip from '$lib/components/Feedback/Tooltip/Tooltip.svelte';
<\/script>

<div class="tooltip-base-box"> 
	<div class="row center">
		<Tooltip content="top-start" placement="top-start">
			<RectButton label="top-start" type="ghost" slot="trigger"></RectButton>
		</Tooltip>
		<Tooltip content="top" placement="top">
			<RectButton class="m-l-sm m-r-sm" label="top" type="ghost" slot="trigger"></RectButton>
		</Tooltip>
		<Tooltip content="top-end" placement="top-end">
			<RectButton label="top-end" type="ghost" slot="trigger"></RectButton>
		</Tooltip>
	</div>
	<div class="row">
		<Tooltip content="left-start" placement="left-start">
			<RectButton label="left-start" type="ghost" slot="trigger"></RectButton>
		</Tooltip>
		<Tooltip content="right-start" placement="right-start">
			<RectButton label="right-start" type="ghost" slot="trigger"></RectButton>
		</Tooltip>
	</div>
	<div class="row">
		<Tooltip content="left" placement="left">
			<RectButton class="m-t-sm m-b-sm" label="left" type="ghost" slot="trigger"></RectButton>
		</Tooltip>
		<Tooltip content="right" placement="right">
			<RectButton class="m-t-sm m-b-sm" label="right" type="ghost" slot="trigger"></RectButton>
		</Tooltip>
	</div>
	<div class="row">
		<Tooltip content="left-end" placement="left-end">
			<RectButton label="left-end" type="ghost" slot="trigger"></RectButton>
		</Tooltip>
		<Tooltip content="right-end" placement="right-end">
			<RectButton label="right-end" type="ghost" slot="trigger"></RectButton>
		</Tooltip>
	</div>
	<div class="row center">
		<Tooltip content="bottom-start" placement="bottom-start">
			<RectButton label="bottom-start" type="ghost" slot="trigger"></RectButton>
		</Tooltip>
		<Tooltip content="bottom" placement="bottom">
			<RectButton class="m-l-sm m-r-sm" label="bottom" type="ghost" slot="trigger"></RectButton>
		</Tooltip>
		<Tooltip content="bottom-end" placement="bottom-end">
			<RectButton label="bottom-end" type="ghost" slot="trigger"></RectButton>
		</Tooltip>
	</div>
</div>`.trim();

	// 触发方式示例代码
	const triggerCode = `<script lang="ts">
	import Tooltip from '$lib/components/Feedback/Tooltip/Tooltip.svelte';
<\/script>

<Tooltip content="点击触发的提示" trigger="click">
	<RectButton label="点击查看提示" type="ghost" slot="trigger"></RectButton>
</Tooltip>`.trim();

	// 自定义内容示例代码
	const customContentCode = `<script lang="ts">
	import Tooltip from '$lib/components/Feedback/Tooltip/Tooltip.svelte';
<\/script>

<Tooltip placement="top">
	<RectButton label="自定义内容" type="ghost" slot="trigger"></RectButton>
	<div slot="content" class="custom-tooltip">
		<h4>自定义标题</h4>
		<p>这是自定义的提示内容</p>
	</div>
</Tooltip>`.trim();

	// 配置选项示例代码
	const optionsCode = `<script lang="ts">
	import Tooltip from '$lib/components/Feedback/Tooltip/Tooltip.svelte';
<\/script>

<Tooltip content="延迟显示的提示" delay={500} showArrow={false}>
	<RectButton label="延迟500ms显示" type="ghost" slot="trigger"></RectButton>
</Tooltip>`.trim();

	// 方法调用示例代码
	const methodCode = `<script lang="ts">
import Tooltip from '$lib/components/Feedback/Tooltip/Tooltip.svelte';
	let tooltipRef;
	
	function openTooltip() {
		tooltipRef.open();
	}
	
	function closeTooltip() {
		tooltipRef.close();
	}
<\/script>

<Tooltip bind:this={tooltipRef} content="通过方法控制的提示">
	<RectButton label="提示目标" type="ghost" slot="trigger"></RectButton>
</Tooltip>

<RectButton label="打开提示" type="ghost" onClick={openTooltip} class="m-l-sm"></RectButton>
<RectButton label="关闭提示" type="ghost" onClick={closeTooltip} class="m-l-sm"></RectButton>`.trim();

	// 组件实例引用（使用any类型避免类型检查错误）
	let tooltipRef: any = null;

	// 方法调用测试函数（添加类型检查）
	function openTooltip() {
		if (tooltipRef && typeof tooltipRef.open === 'function') {
			tooltipRef.open();
		}
	}

	function closeTooltip() {
		if (tooltipRef && typeof tooltipRef.close === 'function') {
			tooltipRef.close();
		}
	}

	// 属性文档数据
	const propsData = [
		{
			id: 1,
			name: 'content',
			describe: '提示内容',
			type: 'string',
			defaultValue: "''",
			required: '否'
		},
		{
			id: 2,
			name: 'placement',
			describe: '提示框位置',
			type: [
				'top',
				'top-start',
				'top-end',
				'bottom',
				'bottom-start',
				'bottom-end',
				'left',
				'left-start',
				'left-end',
				'right',
				'right-start',
				'right-end'
			],
			defaultValue: "'top'",
			required: '否'
		},
		{
			id: 3,
			name: 'trigger',
			describe: '触发方式',
			type: ['hover', 'click'],
			defaultValue: "'hover'",
			required: '否'
		},
		{
			id: 4,
			name: 'options',
			describe: '配置选项',
			type: 'TooltipOptions',
			defaultValue: '{}',
			required: '否'
		},
		{
			id: 5,
			name: 'customClass',
			describe: '自定义类名',
			type: 'string',
			defaultValue: "''",
			required: '否'
		},
		{
			id: 6,
			name: 'onShow',
			describe: '显示时触发的回调',
			type: '() => void',
			defaultValue: 'undefined',
			required: '否'
		},
		{
			id: 7,
			name: 'onHide',
			describe: '隐藏时触发的回调',
			type: '() => void',
			defaultValue: 'undefined',
			required: '否'
		},
		{
			id: 8,
			name: 'onToggle',
			describe: '显示状态切换时触发的回调',
			type: '(visible: boolean) => void',
			defaultValue: 'undefined',
			required: '否'
		}
	];

	// 配置选项数据
	const optionsData = [
		{
			id: 1,
			name: 'delay',
			describe: '显示延迟时间（毫秒）',
			type: 'number',
			defaultValue: '200',
			required: '否'
		},
		{
			id: 2,
			name: 'showArrow',
			describe: '是否显示箭头',
			type: 'boolean',
			defaultValue: 'true',
			required: '否'
		},
		{
			id: 3,
			name: 'transitionClass',
			describe: '自定义过渡动画类名',
			type: 'string',
			defaultValue: "''",
			required: '否'
		}
	];

	// 方法文档数据
	const methodsData = [
		{
			id: 1,
			name: 'open',
			describe: '打开提示框',
			parameters: '无',
			returns: 'void'
		},
		{
			id: 2,
			name: 'close',
			describe: '关闭提示框',
			parameters: '无',
			returns: 'void'
		},
		{
			id: 3,
			name: 'toggle',
			describe: '切换提示框显示状态',
			parameters: '无',
			returns: 'void'
		}
	];

	// 插槽文档数据
	const slotsData = [
		{
			id: 1,
			name: 'trigger',
			describe: '触发提示的元素',
			defaultContent: '无'
		},
		{
			id: 2,
			name: 'content',
			describe: '自定义提示内容',
			defaultContent: 'content 属性值'
		}
	];
</script>

<div class="component-container">
	<div class="title">
		<div class="name">Tooltip 提示</div>
		<div class="describe">
			Tooltip 是一种在用户与界面元素交互时显示的浮动提示框，用于提供额外的信息或说明。
			支持多种触发方式、位置选择和自定义配置，提供良好的无障碍支持和交互体验。
		</div>
	</div>

	<!-- 基础用法模块 -->
	<div class="subtitle">
		<div class="name">基础用法</div>
		<div class="describe">
			最简单的用法，通过&nbsp;&nbsp;<span class="tag">content</span
			>&nbsp;&nbsp;属性设置提示内容，默认悬停触发。
		</div>
	</div>

	<ComponentPreview code={basicCode}>
		<div class="example">
			<Tooltip content="这是一个基础提示">
				<RectButton label="悬停查看提示" type="ghost" slot="trigger"></RectButton>
			</Tooltip>
		</div>
	</ComponentPreview>

	<!-- 位置选择模块 -->
	<div class="subtitle">
		<div class="name">位置选择</div>
		<div class="describe">
			通过&nbsp;&nbsp;<span class="tag">placement</span
			>&nbsp;&nbsp;属性设置提示框的显示位置，支持12种不同的位置选项。
		</div>
	</div>

	<ComponentPreview code={placementCode}>
		<div class="example">
			<div class="tooltip-base-box">
				<div class="row center">
					<Tooltip content="top-start" placement="top-start">
						<RectButton label="top-start" type="ghost" slot="trigger"></RectButton>
					</Tooltip>
					<Tooltip content="top" placement="top">
						<RectButton class="m-l-sm m-r-sm" label="top" type="ghost" slot="trigger"></RectButton>
					</Tooltip>
					<Tooltip content="top-end" placement="top-end">
						<RectButton label="top-end" type="ghost" slot="trigger"></RectButton>
					</Tooltip>
				</div>
				<div class="row">
					<Tooltip content="left-start" placement="left-start">
						<RectButton label="left-start" type="ghost" slot="trigger"></RectButton>
					</Tooltip>
					<Tooltip content="right-start" placement="right-start">
						<RectButton label="right-start" type="ghost" slot="trigger"></RectButton>
					</Tooltip>
				</div>
				<div class="row">
					<Tooltip content="left" placement="left">
						<RectButton class="m-t-sm m-b-sm" label="left" type="ghost" slot="trigger"></RectButton>
					</Tooltip>
					<Tooltip content="right" placement="right">
						<RectButton class="m-t-sm m-b-sm" label="right" type="ghost" slot="trigger"
						></RectButton>
					</Tooltip>
				</div>
				<div class="row">
					<Tooltip content="left-end" placement="left-end">
						<RectButton label="left-end" type="ghost" slot="trigger"></RectButton>
					</Tooltip>
					<Tooltip content="right-end" placement="right-end">
						<RectButton label="right-end" type="ghost" slot="trigger"></RectButton>
					</Tooltip>
				</div>
				<div class="row center">
					<Tooltip content="bottom-start" placement="bottom-start">
						<RectButton label="bottom-start" type="ghost" slot="trigger"></RectButton>
					</Tooltip>
					<Tooltip content="bottom" placement="bottom">
						<RectButton class="m-l-sm m-r-sm" label="bottom" type="ghost" slot="trigger"
						></RectButton>
					</Tooltip>
					<Tooltip content="bottom-end" placement="bottom-end">
						<RectButton label="bottom-end" type="ghost" slot="trigger"></RectButton>
					</Tooltip>
				</div>
			</div>
		</div>
	</ComponentPreview>

	<!-- 触发方式模块 -->
	<div class="subtitle">
		<div class="name">触发方式</div>
		<div class="describe">
			通过&nbsp;&nbsp;<span class="tag">trigger</span
			>&nbsp;&nbsp;属性设置触发方式，支持hover和click两种。
		</div>
	</div>

	<ComponentPreview code={triggerCode}>
		<div class="example">
			<Tooltip content="点击触发的提示" trigger="click">
				<RectButton label="点击查看提示" type="ghost" slot="trigger"></RectButton>
			</Tooltip>
		</div>
	</ComponentPreview>

	<!-- 自定义内容模块 -->
	<div class="subtitle">
		<div class="name">自定义内容</div>
		<div class="describe">
			通过&nbsp;&nbsp;<span class="tag">content插槽</span
			>&nbsp;&nbsp;自定义提示内容，可以包含任意HTML元素和样式。
		</div>
	</div>

	<ComponentPreview code={customContentCode}>
		<div class="example">
			<Tooltip placement="top">
				<RectButton label="自定义内容" type="ghost" slot="trigger"></RectButton>
				<div slot="content" class="custom-tooltip">
					<h4>自定义标题</h4>
					<p>这是自定义的提示内容</p>
				</div>
			</Tooltip>
		</div>
	</ComponentPreview>

	<!-- 配置选项模块 -->
	<div class="subtitle">
		<div class="name">配置选项</div>
		<div class="describe">
			通过&nbsp;&nbsp;<span class="tag">options</span
			>&nbsp;&nbsp;属性配置提示框的行为，如延迟显示、是否显示箭头等。
		</div>
	</div>

	<ComponentPreview code={optionsCode}>
		<div class="example">
			<Tooltip content="延迟显示的提示" delay={500} showArrow={false}>
				<RectButton label="延迟500ms显示" type="ghost" slot="trigger"></RectButton>
			</Tooltip>
		</div>
	</ComponentPreview>

	<!-- 方法调用模块 -->
	<div class="subtitle">
		<div class="name">方法调用</div>
		<div class="describe">通过bind:this获取组件实例，调用方法手动控制提示框的显示和隐藏。</div>
	</div>

	<ComponentPreview code={methodCode}>
		<div class="example">
			<Tooltip bind:this={tooltipRef} content="通过方法控制的提示">
				<RectButton label="提示目标" type="ghost" slot="trigger"></RectButton>
			</Tooltip>

			<RectButton label="打开提示" type="ghost" onClick={openTooltip} class="m-l-sm"></RectButton>
			<RectButton label="关闭提示" type="ghost" onClick={closeTooltip} class="m-l-sm"></RectButton>
		</div>
	</ComponentPreview>

	<!-- 属性文档 -->
	<div class="subtitle">
		<div class="name">Tooltip Props</div>
	</div>
	<Table data={propsData} border={false} size="lg">
		<TableColumn key="name" title="属性名" align="left" minWidth={120} />
		<TableColumn key="describe" title="说明" align="left" minWidth={200} />
		<TableColumn key="type" title="类型" align="left" minWidth={200}>
			{#snippet cell(scope)}
				{#if Array.isArray(scope.row.type)}
					<span style="display:inline-flex; gap: 10px; flex-wrap: wrap;">
						{#each scope.row.type as item}
							<span class="tag">{item}</span>
						{/each}
					</span>
				{:else}
					<span>{scope.row.type}</span>
				{/if}
			{/snippet}
		</TableColumn>
		<TableColumn key="defaultValue" title="默认值" align="left" minWidth={120} />
		<TableColumn key="required" title="是否必填" align="left" minWidth={100} />
	</Table>

	<!-- 配置选项文档 -->
	<div class="subtitle">
		<div class="name">TooltipOptions</div>
	</div>
	<Table data={optionsData} border={false} size="lg">
		<TableColumn key="name" title="属性名" align="left" minWidth={120} />
		<TableColumn key="describe" title="说明" align="left" minWidth={200} />
		<TableColumn key="type" title="类型" align="left" minWidth={120} />
		<TableColumn key="defaultValue" title="默认值" align="left" minWidth={120} />
		<TableColumn key="required" title="是否必填" align="left" minWidth={100} />
	</Table>

	<!-- 方法文档 -->
	<div class="subtitle">
		<div class="name">Tooltip Methods</div>
	</div>
	<Table data={methodsData} border={false} size="lg">
		<TableColumn key="name" title="方法名" align="left" minWidth={120} />
		<TableColumn key="describe" title="说明" align="left" minWidth={200} />
		<TableColumn key="parameters" title="参数" align="left" minWidth={120} />
		<TableColumn key="returns" title="返回值" align="left" minWidth={120} />
	</Table>

	<!-- 插槽文档 -->
	<div class="subtitle">
		<div class="name">Tooltip Slots</div>
	</div>
	<Table data={slotsData} border={false} size="lg">
		<TableColumn key="name" title="插槽名" align="left" minWidth={120} />
		<TableColumn key="describe" title="说明" align="left" minWidth={200} />
		<TableColumn key="defaultContent" title="默认内容" align="left" minWidth={200} />
	</Table>
</div>

<style scoped lang="scss">
	.example {
		margin-bottom: 20px;
	}
	.tooltip-base-box {
		width: 600px;
	}
	.row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		&.center {
			justify-content: center;
		}
	}

	.custom-tooltip {
		padding: 6px;
	}

	.custom-tooltip h4 {
		margin-bottom: 5px;
		font-size: 14px;
	}

	.custom-tooltip p {
		font-size: 12px;
		opacity: 0.9;
	}
</style>
